<div>
  <span class="brand" style="font-weight:bold;">{{gatewayFlowRuleDialog.title}}</span>
  <div class="card" style="margin-top: 20px;margin-bottom: 10px;">
    <div class="panel-body">
      <div class="row">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label class="col-sm-2 control-label">API 类型</label>
            <div class="col-sm-9">
              <div align="center" class="form-control highlight-border">
                <input checked disabled="" ng-if="gatewayFlowRuleDialog.type == 'edit'" ng-model='currentRule.resourceMode'
                       title="Route ID"
                       type="radio" value="0"/><span ng-if="gatewayFlowRuleDialog.type == 'edit'">&nbsp;Route ID&nbsp;&nbsp;</span>
                <input checked ng-click="useRouteID()" ng-if="gatewayFlowRuleDialog.type == 'add'" ng-model='currentRule.resourceMode'
                       title="Route ID"
                       type="radio" value="0"/><span ng-if="gatewayFlowRuleDialog.type == 'add'">&nbsp;Route ID&nbsp;&nbsp;</span>
                <input disabled="" ng-if="gatewayFlowRuleDialog.type == 'edit'" ng-model='currentRule.resourceMode'
                       title="API分组"
                       type="radio" value="1"/><span ng-if="gatewayFlowRuleDialog.type == 'edit'">&nbsp;API 分组&nbsp&nbsp;</span>
                <input ng-click="useCustormAPI()" ng-if="gatewayFlowRuleDialog.type == 'add'" ng-model='currentRule.resourceMode'
                       title="API分组"
                       type="radio" value="1"/><span ng-if="gatewayFlowRuleDialog.type == 'add'">&nbsp;API 分组&nbsp&nbsp;</span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">API 名称</label>
            <div class="col-sm-9">
              <input class="form-control" disabled=""
                     ng-if="currentRule.resourceMode == 0 && gatewayFlowRuleDialog.type == 'edit'" ng-model='currentRule.resource' placeholder="请输入 Route ID"
                     type="text"/>
              <input class="form-control highlight-border" ng-if="currentRule.resourceMode == 0 && gatewayFlowRuleDialog.type == 'add'"
                     ng-model='currentRule.resource' placeholder="请输入 Route ID" type="text"/>

              <select class="form-control"
                      disabled="" ng-if="currentRule.resourceMode == 1 && gatewayFlowRuleDialog.type == 'edit'"
                      ng-init="selectedName = currentRule.resource" ng-model="currentRule.resource" ng-options="name for name in apiNames">
              </select>
              <select class="form-control"
                      ng-if="currentRule.resourceMode == 1 && gatewayFlowRuleDialog.type == 'add'" ng-init="currentRule.resource"
                      ng-model="currentRule.resource" ng-options="name for name in apiNames">
              </select>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">针对请求属性</label>
            <div class="col-sm-2">
              <label class="checkbox-inline">
                <input checked ng-click="notUseParamItem()" ng-if="currentRule.paramItem != null" type="checkbox"/>
                <input ng-click="useParamItem()" ng-if="currentRule.paramItem == null" type="checkbox"/>
              </label>
            </div>
          </div>

          <div class="form-group" ng-if="currentRule.paramItem != null">
            <label class="col-sm-2 control-label">参数属性</label>
            <div class="col-sm-9">
              <div align="center" class="form-control highlight-border">
                <input checked name="parseStrategy" ng-model='currentRule.paramItem.parseStrategy' title="Client IP"
                       type="radio" value="0"/>&nbsp;Client IP&nbsp;&nbsp;
                <input name="parseStrategy" ng-model='currentRule.paramItem.parseStrategy' title="Remote Host" type="radio"
                       value="1"/>&nbsp;Remote Host&nbsp;&nbsp;
                <input name="parseStrategy" ng-model='currentRule.paramItem.parseStrategy' title="Header" type="radio"
                       value="2"/>&nbsp;Header&nbsp;&nbsp;
                <input name="parseStrategy" ng-model='currentRule.paramItem.parseStrategy' title="URL 参数" type="radio"
                       value="3"/>&nbsp;URL 参数&nbsp;&nbsp;
                <input name="parseStrategy" ng-model='currentRule.paramItem.parseStrategy' title="Cookie" type="radio"
                       value="4"/>&nbsp;Cookie&nbsp;&nbsp;
              </div>
            </div>
          </div>

          <div class="form-group"
               ng-if="currentRule.paramItem != null && (currentRule.paramItem.parseStrategy == 2 || currentRule.paramItem.parseStrategy == 3 || currentRule.paramItem.parseStrategy == 4)">
            <label class="col-sm-2 control-label">
              <span ng-if="currentRule.paramItem.parseStrategy==2">Header 名称</span>
              <span ng-if="currentRule.paramItem.parseStrategy==3">URL 参数名称</span>
              <span ng-if="currentRule.paramItem.parseStrategy==4">Cookie 名称</span>
            </label>
            <div class="col-sm-9">
              <input class="form-control highlight-border" name="fieldName" ng-model='currentRule.paramItem.fieldName' placeholder="请输入"
                     type="text"/>
            </div>
          </div>

          <div class="form-group"
               ng-if="currentRule.paramItem != null && (currentRule.paramItem.parseStrategy == 2 || currentRule.paramItem.parseStrategy == 3 || currentRule.paramItem.parseStrategy == 4)">
            <label class="col-sm-2 control-label">属性值匹配</label>
            <div class="col-sm-2">
              <label class="checkbox-inline">
                <input checked ng-click="notUseParamItemVal()" ng-if="currentRule.paramItem.pattern != null"
                       type="checkbox"/>
                <input ng-click="useParamItemVal()" ng-if="currentRule.paramItem.pattern == null" type="checkbox"/>
              </label>
            </div>
          </div>

          <div class="form-group" ng-if="currentRule.paramItem.pattern != null">
            <label class="col-sm-2 control-label">匹配模式</label>
            <div class="col-sm-4 control-label">
              <div align="center" class="form-control highlight-border">
                <input checked ng-model="currentRule.paramItem.matchStrategy" title="精确" type="radio" value="0"/>&nbsp;精确&nbsp;&nbsp;
                <input ng-model="currentRule.paramItem.matchStrategy" title="子串" type="radio" value="3"/>&nbsp;子串&nbsp;&nbsp;
                <input ng-model="currentRule.paramItem.matchStrategy" title="正则" type="radio" value="2"/>&nbsp;正则&nbsp;&nbsp;
              </div>
            </div>
            <label class="col-sm-2 control-label">匹配串</label>
            <div class="col-sm-3 control-label">
              <input class="form-control highlight-border" ng-model="currentRule.paramItem.pattern" placeholder="匹配串"
                     type='text'/>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">阈值类型</label>
            <div class="col-sm-9">
              <div align="center" class="form-control highlight-border">
                <input checked name="grade" ng-model="currentRule.grade" title="QPS" type="radio" value="1"/>&nbsp;QPS&nbsp;&nbsp;
                <input name="grade" ng-model="currentRule.grade" title="线程数" type="radio" value="0"/>&nbsp;线程数&nbsp;&nbsp;
              </div>
            </div>
          </div>

          <div class="form-group">
            <div>
              <label class="col-sm-2 control-label">
                <span ng-if="currentRule.grade==1">QPS 阈值</span>
                <span ng-if="currentRule.grade==0">线程数</span>
              </label>
              <div class="col-sm-3">
                <input class="form-control highlight-border" min="0" ng-model='currentRule.count' placeholder="阈值"
                       type='number'/>
              </div>
            </div>
          </div>

          <div class="form-group" ng-if="currentRule.grade==1">
            <div>
              <label class="col-sm-2 control-label">间隔</label>
              <div class="col-sm-3">
                <input class="form-control highlight-border" id="txtInterval" min="1" ng-model='currentRule.interval'
                       placeholder="统计窗口时间长度" type='number'/>
              </div>
              <div class="col-sm-2">
                <select class="form-control" ng-click="changeIntervalUnit()"
                        ng-init="currentRule.intervalUnit"
                        ng-model="currentRule.intervalUnit" ng-options="intervalUnit.val as intervalUnit.desc for intervalUnit in intervalUnits">
                </select>
              </div>
            </div>
          </div>

          <div class="form-group" ng-if="currentRule.grade==1">
            <label class="col-sm-2 control-label">流控方式</label>
            <div class="col-sm-9">
              <div align="center" class="form-control highlight-border">
                <input checked name="controlBehavior" ng-model='currentRule.controlBehavior' title="快速失败" type="radio"
                       value="0"/>&nbsp;快速失败&nbsp;&nbsp;
                <input name="controlBehavior" ng-model='currentRule.controlBehavior' title="匀速排队" type="radio"
                       value="2"/>&nbsp;匀速排队&nbsp&nbsp;
              </div>
            </div>
          </div>

          <div class="form-group" ng-if="currentRule.grade==1 && currentRule.controlBehavior==0">
            <div>
              <label class="col-sm-2 control-label">Burst size</label>
              <div class="col-sm-3">
                <input class="form-control highlight-border" min="0" ng-model='currentRule.burst' placeholder="突发请求额外允许数"
                       type='number'/>
              </div>
            </div>
          </div>

          <div class="form-group" ng-if="currentRule.grade==1 && currentRule.controlBehavior==2">
            <div>
              <label class="col-sm-2 control-label">超时时间</label>
              <div class="col-sm-3">
                <input class="form-control highlight-border" min="0" ng-model='currentRule.maxQueueingTimeoutMs'
                       placeholder="排队等待时间(ms)" type='number'/>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="separator"></div>
      <div clss="row" style="margin-top: 20px;">
        <button class="btn btn-outline-danger" ng-click="closeThisDialog()"
                style="float:right; height: 30px;font-size: 12px;margin-left: 10px;">取消
        </button>
        <button class="btn btn-outline-success" ng-click="saveRule()"
                style="float:right; height: 30px;font-size: 12px;margin-left: 10px;">{{gatewayFlowRuleDialog.confirmBtnText}}
        </button>
        <button class="btn btn-default" ng-click="saveRuleAndContinue()"
                ng-if="gatewayFlowRuleDialog.saveAndContinueBtnText"
                style="float:right; height: 30px;font-size: 12px;">{{gatewayFlowRuleDialog.saveAndContinueBtnText}}
        </button>
      </div>
    </div>
  </div>
</div>
